<script lang="ts">
export default {
  name: "Detail",
};
</script>
<script setup lang="ts">
import { reactive } from "vue";
import { addNews, putGame } from "@/api/dbserver";
import { ElMessage } from "element-plus";
import { createDialog } from "@/utils/createDialog";
import detail3 from "./detail3.vue";
const props = defineProps<{ hide: Function; data: any }>();
const data = reactive<any>({
  id: props.data.id,
  imgUrl: props.data.imgUrl,
  title: props.data.title,
  imgOne: 1,
  showUploader: true,
});
const handleConfirm = () => {
  if (data.id) {
    const reqData = {
      id: data.id,
      imgUrl: data.imgUrl,
      title: data.title,
    };
    putGame(reqData).then(() => {
      ElMessage.success("修改成功!");
      props.hide();
    });
  } else {
    const reqData = {
      id: Date.now(),
      imgUrl: data.imgUrl,
      title: data.title,
    };
    addNews(reqData).then(() => {
      ElMessage.success("添加成功!");
      props.hide();
    });
  }
};
const selectImg = () => {
  console.log(data.imgUrl);
  if (data.imgOne == 1) {
    data.showUploader = false;
    setTimeout(() => {
      data.imgUrl = "";
      data.showUploader = true;
    });
  } else {
    data.showUploader = false;
    setTimeout(() => {
      data.imgUrl = [];
      data.showUploader = true;
    });
  }
};
const create = () => {
  createDialog({
    title: "弹窗123",
    width: "500px",
    component: detail3,
  });
};
defineExpose({
  handleConfirm,
});
</script>

<template>
  <el-form label-width="80px">
    <el-form-item label="ID" v-if="data.id">
      {{ data.id }}
    </el-form-item>
    <el-form-item v-else>
      <el-radio-group v-model="data.imgOne" @change="selectImg">
        <el-radio :label="1">单张图片</el-radio>
        <el-radio :label="2">多张图片</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="图片">
      <uploader v-model:value="data.imgUrl" v-if="data.showUploader" />
    </el-form-item>
    <el-form-item label="标题">
      <el-input style="width: 200px" v-model="data.title" />
    </el-form-item>
    <el-form-item>
      <el-button @click="create">创建弹窗</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="less" scoped>
.footer {
  margin-top: 200px;
}
</style>
<style>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
